<!DOCTYPE html>
<html lang="en">

<head>
  <!-- basic -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible"
        content="IE=edge" />
  <!-- mobile metas -->
  <meta name="viewport"
        content="width=device-width, initial-scale=1" />
  <meta name="viewport"
        content="initial-scale=1, maximum-scale=1" />
  <!-- site metas -->
  <title>轻态公寓·老年港湾</title>
  <meta name="keywords"
        content="" />
  <meta name="description"
        content="" />
  <meta name="author"
        content="" />
  <!-- site icons -->
  <link rel="icon"
        href="images/fevicon/fevicon.png"
        type="image/gif" />
  <!-- Owl Stylesheets -->
  <link rel="stylesheet"
        type="text/css"
        href="css/owl.carousel.min.css" />
  <!-- nice select css -->
  <link rel="stylesheet"
        type="text/css"
        href="css/nice-select.min.css" />
  <!-- bootstrap css -->
  <link rel="stylesheet"
        href="https://www.jq22.com/jquery/bootstrap-4.2.1.css" />
  <!-- Site css -->
  <link rel="stylesheet"
        href="css/style.css" />
  <!-- responsive css -->
  <link rel="stylesheet"
        href="css/responsive.css" />
  <!-- custom css -->
  <link rel="stylesheet"
        href="css/custom.css" />
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body id="default_theme"
      class="about_page sub_page">
  <!-- loader -->
  <div class="bg_load">
    <img class="loader_animation"
         src="images/loader.svg"
         alt="#" />
  </div>
  <!-- end loader -->
  <div id="app">
    <!-- hero area starts -->
    <div class="hero_area">
      <!-- header section starts -->
      <header class="header_section">
        <!-- navbar starts -->
        <nav class="navbar navbar-expand-lg header_navbar">
          <a class="navbar-brand"
             href="index.html">
            <img src="images/logo.png"
                 alt="" />
            <span> 轻态公寓·老年港湾 </span>
          </a>
          <button class="navbar-toggler"
                  type="button"
                  data-toggle="collapse"
                  data-target="#navbarSupportedContent"
                  aria-controls="navbarSupportedContent"
                  aria-expanded="false"
                  aria-label="Toggle navigation">
            <span class=""> </span>
          </button>

          <div class="collapse navbar-collapse"
               id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto align-items-center">
              <li class="nav-item">
                <a class="nav-link"
                   href="index.html">首页 <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link"
                   href="about.html">关于轻态 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link"
                   href="property.html"> 找房 </a>
              </li>
              <li class="nav-item active">
                <a class="nav-link"
                   href="order_list.html"> 我的订单 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link"
                   href="contact.html"> 联系我们 </a>
              </li>
            </ul>
            <div class="user_option">
              <a href="user_info.html"
                 class="user_login_link">
                <svg data-name="Layer 1"
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 518.95 441.44">
                  <defs>
                    <style>
                      .cls-1 {
                        isolation: isolate;
                      }
                    </style>
                  </defs>
                  <title>user-icon</title>
                  <g class="">
                    <path class=""
                          d="M631.75,452.8A132.22,132.22,0,0,1,659,495.72H140.05q9.84-24.53,30.1-45.27,21.27-21.69,52.41-37.73,89.78-47.16,181.63-45.51T585.83,417.9Q613.32,433,631.75,452.8ZM322.2,73.15q-34.77,17.92-55,49.75A127.59,127.59,0,0,0,247,192.7a126.32,126.32,0,0,0,20.76,70,146.22,146.22,0,0,0,55.53,50.46q35.28,18.87,77.06,18.63t77.07-19.57q34.75-18.86,54.49-50,20.75-32.55,20.75-70.27t-21.27-69.8q-20.25-31.12-54.49-49a163.52,163.52,0,0,0-77.33-18.87Q357.49,54.28,322.2,73.15Z"
                          transform="translate(-140.05 -54.28)" />
                  </g>
                </svg>
              </a>
            </div>
          </div>
        </nav>
        <!-- navbar ends -->
      </header>
      <!-- header section ends -->
    </div>
    <!-- hero area ends -->

    <!-- page info starts -->

    <div class="page_info layout_padding pl_mobile_20">
      <div class="section_bg section_bg_right"></div>
      <div class="container">
        <div class="page_box">
          <h2 class="page_name">我的订单</h2>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="index.html">首页</a></li>
              <li class="breadcrumb-item active"
                  aria-current="page">
                我的订单
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </div>

    <!-- page info ends -->

    <!-- about section starts -->

    <section class="about_section layout_padding mr-auto ml-auto"
             style="width: 80%;">
      <div class="list-group">
        <div href="#"
             v-for="item in  list"
             :key="item.id"
             class="list-group-item list-group-item-action">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">{{item.houseInfo.title}}</h5>
            <small>
              <span class="badge"
                    :class="{
                      'badge-success':item.state===stateObj.CHECK_IN,
                      'badge-warning':item.state===stateObj.PRE_PAY,
                      'badge-danger':item.state===stateObj.OUT,
                      'badge-primary':item.state===stateObj.PAYED,
                  }">
                {{ stateOptions.filter((v) => v.value === item.state)[0].label }}
              </span>
              <span v-if="item.state===stateObj.PRE_PAY"
                    @click="onPrePay(item)">点击支付</span>

            </small>



          </div>
          <p class="mb-1">期限：{{item.term}}年，门牌号：{{item.houseInfo.propertyId}}</p>
          <small>订单号：{{item.id}}，租金:￥{{item.totalPrice / 100}}</small>
          </a>
        </div>


        <el-dialog title="请支付"
                   :visible.sync="dialogVisible"
                   width="30%">
          <div>
            <div class="text-center">
              需支付：￥{{(prePrice/100).toFixed(2)}}
            </div>
            <div class="flex flex-row  justify-content-center ">
              <img class=""
                   src="images/wx_pay.png"
                   alt="#" />
            </div>
          </div>
          <span slot="footer"
                class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary"
                       @click="onPay">我已支付</el-button>
          </span>
        </el-dialog>
    </section>

    <!-- about section ends -->

  </div>

  <!-- footer section -->
  <footer class="footer_section">
    <p>轻态公寓 | 轻态港湾 | 轻态社区 </p>
      <p>Copyright © 2024 轻态 ICP证浙B2-20160559</p>
  </footer>
  <!-- end  footer section -->

  <!-- js section -->
  <!-- jQuery -->
  <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <!-- bootstrap js -->
  <script src="js/bootstrap.min.js"></script>
  <!-- owl slider -->
  <script src="js/owl.carousel.min.js"></script>
  <!-- nice select -->
  <script src="js/jquery.nice-select.min.js"></script>
  <!-- custom js -->
  <script src="js/custom.js"></script>

  <script src="js/vue@2.6.14.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet"
        href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        list: [],
        stateOptions: [{
            label: "待支付",
            value: 0,
          },
          {
            label: "已支付，待审核",
            value: 1,
          },
          {
            label: "入住中",
            value: 2,
          },
          {
            label: "已退租",
            value: 3,
          },
        ],
        stateObj: {
          PRE_PAY: 0, //待支付
          PAYED: 1, //已支付/审核中
          CHECK_IN: 2, //入住中
          OUT: 3, //已退租
        },
        prePrice: null,
        preOrderId: null,
        dialogVisible: false
      },
      mounted() {},
      created() {
        const token = window.localStorage.getItem("APFTE_TOKEN");
        if (!token) {
          this.$confirm("你暂未登录，是否前去登录?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            window.location.href = "./login.html";
          });
          return;
        }
        this.getList();
      },
      methods: {
        getList() {
          const token = window.localStorage.getItem("APFTE_TOKEN");
          axios({
              headers: {
                Authorization: "Bearer " + token,
              },
              method: "post",
              data: {},
              url: "http://localhost:8080/api/order/app/list"
            })
            .then((response) => {
              const res = response.data;
              if (res.code === 200) {
                console.log("====", res.data.list);
                this.list = res.data.list;
              } else if (response.data.code === 401) {
                this.$confirm("你登录已过期，是否前去登录?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                }).then(() => {
                  window.location.href = "./login.html";
                });
              }
            });
        },
        onToPropertyDetail(item) {
          window.location.href = `./property_detail.html?id=${item.id}`;
        },
        onPrePay(item) {
          this.prePrice = item.totalPrice
          this.preOrderId = item.id
          this.dialogVisible = true
        },
        onPay() {
          const token = window.localStorage.getItem("APFTE_TOKEN");
          if (!token) {
            this.$confirm("你暂未登录，是否前去登录?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              window.location.href = "./login.html";
            });
            return;
          }

          const params = {
            id: this.preOrderId
          };
          axios({
            headers: {
              Authorization: "Bearer " + token,
            },
            method: "post",
            data: params,
            url: "http://localhost:8080/api/order/app/pay_order",
          }).then((response) => {
            if (response.data.code === 200) {
              this.$message.success("提交成功，请等待轻态审核");
              this.dialogVisible = false
              this.getList()
            } else if (response.data.code === 401) {
              this.$confirm("你登录已过期，是否前去登录?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }).then(() => {
                window.location.href = "./login.html";
              });
            } else {
              this.$message.error(response.data.data);
            }
          });
        }
      },
    });
  </script>
</body>

</html>
